import React, { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import './index.scss'
import { View, Text, Button, Video, ScrollView } from '@tarojs/components'
import { AtSearchBar, AtTabs, AtTabsPane, AtButton, AtMessage } from 'taro-ui'
// import SecondBtn from './component/secondBtn/index'
import Header from './component/header/index'
import List from './component/totalList/index'
import DayList from './component/dayList/index'
import WeekList from './component/weekList/index'
import MonList from './component/monList/index'

import { getTags } from '../../api/index'
import { useStore } from '../../model/index'

interface GetTagsResSubArr {
  label: string
  value: number
}
interface GetTagsResArr {
  label: string
  sub: Array<GetTagsResSubArr>
  value: number
}

export default () => {
  const [value, setValue] = useState('')
  const [current, setCurrent] = useState(0)
  const [btnCurrent, setBtnCurrent] = useState(-1)
  const [tagsList, setTagsList] = useState<GetTagsResArr[]>([])
  const [searchVal, setSearchVal] = useState('')
  const [state, actions] = useStore('Index')

  useEffect(() => {
    ;(async () => {
      const {
        data: { data, errorCode, errorMessage }
      } = await getTags()
      if (!errorCode) {
        setTagsList(data.tagsList)
      } else {
        Taro.atMessage({
          message: errorMessage + ',请充值',
          type: 'error'
        })
      }
    })()
    return () => {
      ;(async () => {
        await actions.toSaveSearchWord('')
      })()
    }
  }, [])

  const onSearch = async () => {
    // console.log(val);
    await actions.toSaveSearchWord(value)
    await actions.toSaveChoosedBtn({
      firstBtn: -1,
      secondBtn: -1
    })
    setSearchVal(value)
    setBtnCurrent(-1)
  }

  const onClear = async () => {
    await actions.toSaveSearchWord('')
    setValue('')
    setSearchVal('')
  }

  const changeTabs = async (val) => {
    setCurrent(val)
    setBtnCurrent(-1)
  }

  return (
    <View>
      <AtSearchBar
        value={value}
        onChange={(val) => setValue(val)}
        onActionClick={onSearch}
        onClear={onClear}
      />
      {/* <View className="divLine"></View> */}
      {!searchVal ? (
        <AtTabs
          className="at-tabs"
          current={current}
          // scroll
          tabList={[
            { title: '总榜' },
            { title: '日榜' },
            { title: '周榜' },
            { title: '月榜' }
          ]}
          onClick={(val) => changeTabs(val)}
        >
          <AtTabsPane current={current} index={0}>
            <View>
              <Header></Header>
              <List></List>
              {/* <SecondBtn></SecondBtn> */}
            </View>
          </AtTabsPane>

          <AtTabsPane current={current} index={1}>
            <View>
              <Header></Header>
              {current === 1 ? <DayList></DayList> : <View></View>}
              {/* <SecondBtn></SecondBtn> */}
            </View>
          </AtTabsPane>

          <AtTabsPane current={current} index={2}>
            <View>
              <Header></Header>
              {current === 2 ? <WeekList></WeekList> : <View></View>}
              {/* <SecondBtn></SecondBtn> */}
            </View>
          </AtTabsPane>

          <AtTabsPane current={current} index={3}>
            <View>
              <Header></Header>
              {current === 3 ? <MonList></MonList> : <View></View>}
              {/* <SecondBtn></SecondBtn> */}
            </View>
          </AtTabsPane>
        </AtTabs>
      ) : (
        <AtTabs
          className="at-tabs"
          current={0}
          tabList={[{ title: '搜索结果' }]}
          onClick={() => {}}
        >
          <AtTabsPane current={0} index={0}>
            <View className="search-view">
              <List></List>
              {/* <SecondBtn></SecondBtn> */}
            </View>
          </AtTabsPane>
        </AtTabs>
      )}
    </View>
  )
}
